import React, { Component } from 'react'
import { useNavigate } from 'react-router';

import { reqProduct, searchProduct, reqUpdateStatus } from '../../api/admin'
import { PAGE_SIZE } from '../../utils/constant'

import {
  Card,
  Select,
  Input,
  Button,
  Table,
  message
} from 'antd';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
const { Option } = Select;

function annoyCom (MessCom) {
  return (props) => {
    let navigate = useNavigate()
    return <MessCom navigate={navigate} />
  }
}
class ProductHome extends Component {

  state = {
    total: 0,
    loading: false,
    products: [], //保存请求到的商品数据
    searchName: '', //搜索的关键字
    searchType: 'productName' //根据那个字段搜索
  }

  UNSAFE_componentWillMount () {
    this.initColumns()
  }

  componentDidMount () {
    this.getProducts(1)
  }

  //获取指定页码的列表显示
  getProducts = async (pageNum) => {
    this.pageNum = pageNum //保存pageNum
    this.setState({
      loading: true
    })
    let result = ''
    const { searchName, searchType } = this.state

    if (searchName) {
      result = await searchProduct(pageNum, PAGE_SIZE, searchName, searchType)
    } else {
      result = await reqProduct(pageNum, PAGE_SIZE)
    }

    this.setState({
      loading: false
    })
    if (result.status === 0) {
      const { total, list } = result.data
      this.setState({
        total,
        products: list
      })
    }
  }

  //更新指定商品的状态
  updateStatus = async ({ productId, status }) => {
    const result = await reqUpdateStatus({ productId, status })
    if (result.status === 0) {
      message.success('更新商品成功')
      this.getProducts(this.pageNum)
    }
  }

  initColumns = () => {
    this.columns = [
      {
        title: '商品名称',
        dataIndex: 'name'
      },
      {
        title: '商品描述',
        dataIndex: 'desc'
      },
      {
        title: '价格',
        dataIndex: 'price',
        render: (price) => {
          return '￥' + price
        }
      },
      {
        title: '状态',
        width: 100,
        //dataIndex: 'status',
        render: (product) => {
          const { status, _id } = product
          return (
            <span>
              <Button type="primary" onClick={() => this.updateStatus({ productId: _id, status: status === 1 ? 2 : 1 })}>{status === 1 ? '下架' : '上架'}</Button>
              <span>{status === 1 ? '在售' : '已下架'}</span>
            </span>
          )
        }
      },
      {
        title: '操作',
        width: 100,
        render: (product) => {
          return (
            <span>
              <Button type="link" onClick={() => this.props.navigate('/product/detail', { state: product })}>详情</Button>
              <Button type="link" onClick={() => this.props.navigate('/product/addUpdate', { state: product })}>修改</Button>
            </span>
          )
        }
      }
    ];
  }

  render () {

    const { products, total, loading, searchName, searchType } = this.state

    const title = (
      <div>
        <Select
          value={searchType}
          onChange={value => this.setState({ searchType: value })}
        >
          <Option value="productName">按名称搜索</Option>
          <Option value="productDesc">按描述搜索</Option>
        </Select>
        <Input
          placeholder="关键字"
          style={{
            width: 150,
            margin: "0 15px"
          }}
          value={searchName}
          onChange={event => this.setState({ searchName: event.target.value })}
        />
        <Button
          type="primary"
          icon={<SearchOutlined />}
          onClick={() => this.getProducts(1)}
        >
          搜索
        </Button>
      </div>
    )

    const extra = (
      <Button type="primary" icon={<PlusOutlined />} onClick={() => this.props.navigate('/product/addUpdate')}>
        添加商品
      </Button>
    )

    return (
      <Card size="small" title={title} extra={extra}>
        <Table
          dataSource={products}
          columns={this.columns}
          rowKey='_id'
          bordered
          loading={loading}
          pagination={{
            current: this.pageNum,
            defaultPageSize: PAGE_SIZE,
            showQuickJumper: true,
            total,
            onChange: page => this.getProducts(page)
          }}
        />
      </Card>
    )
  }
}

export default annoyCom(ProductHome)